<template>
	<!-- 底部菜单组件 -->
	<view>
		<view class="kongbai"></view>
		<view class='tabbar-box'>
			<view  @click="goUrl(item.url,item.name)" class='tabbar-box-item' v-for="(item,index) in tabbarData" :key="index">
				<image v-if="selectPath != item.url" class='tabbar-box-img'  :src="item.iconPath" mode="widthFix"></image>
				<image v-else class='tabbar-box-img' :src="item.selectedIconPath" mode="widthFix"></image>
				<text class="tabbar-box-text" :style="{color:selectPath == item.url ? mainColor : '#999' }" >{{item.name}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import http from '../../api/api-index.js'
	import baseUrl from "../../utils/config.js";
	export default{
		props:{
			selectPath:{
				type:String,
				default:''
			}
		},
		watch:{
			selectPath:{
				handler(newv){
					// console.log(  newv )
				},
				immediate: true, // 重点
				deep: true, // 重点
			}
		},
		data(){
			return{
				mainColor:uni.getStorageSync('mianColor'),
				tabbarData:[
					{
						url:'/pages/index/index',
						name:'首页',
						iconPath:baseUrl+'/uploads/static/image/recovery_index_menu_icon_01_nor@2x.png',
						selectedIconPath:baseUrl+'/uploads/static/image/recovery_index_menu_icon_01_sel@2x.png',
					},
					{
						url:'/pages/recover/recover',
						name:'预约回收',
						iconPath:baseUrl+'/uploads/static/image/recovery_index_menu_icon_02_nor@2x.png',
						selectedIconPath:baseUrl+'/uploads/static/image/recovery_index_menu_icon_02_sel@2x.png',
					},
					{
						url:'/pages/my/my',
						name:'我的',
						iconPath:baseUrl+'/uploads/static/image/recovery_index_menu_icon_03_nor@2x.png',
						selectedIconPath:baseUrl+'/uploads/static/image/recovery_index_menu_icon_03_sel@2x.png',
					},
				],
			}
		},
		created() {
			
		},
		methods:{
			goUrl(url,name){
				if(url != this.selectPath){
					uni.redirectTo({
						url:url
					});
				}
			}
		}
	}
</script>

<style scoped>
	.kongbai{width: 100%;height: calc(60px + env(safe-area-inset-bottom) /2);}
	.tabbar-box{width: 100%;position: fixed;bottom: 0;left: 0;height: calc(60px + env(safe-area-inset-bottom) /2);z-index: 10;display: flex;flex-direction: row;align-items: flex-end;background-color: #fff;border-top: 1px solid #f2f2f2;padding-bottom:calc(5px + env(safe-area-inset-bottom) /2);box-sizing: border-box;}
	.tabbar-box-item{flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;}
	.tabbar-box-img{width: 25px;height: 25px;}
	.tabbar-box-text{font-size: 12px;color: #999;margin-top: 5px;}
</style>
